<template>
  <div class="roles">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 角色列表区域 -->
      <el-button type="primary">添加角色</el-button>
       <el-table :data="roles" style="width: 100%" border >
         <!-- 展开列 -->
         <el-table-column type="expand">
           <template slot-scope="scope">
             <el-row class="border-bottom" :class="index === 0 ? 'border_top': ''" v-for="(item, index) in scope.row.children" :key="item.id">
               <!-- 渲染一级权限 -->
               <el-col :span="5">
                 <el-tag>{{item.authName}}</el-tag>
                 <i class="el-icon-caret-right"></i>
               </el-col>
               <!-- 渲染二级和三级权限 -->
               <el-col :span="19">
                 <!-- 每一行的二级权限 -->
                 <el-row v-for="item2 in item.children" :key="item2.id">
                   <!-- 展示二级权限名称 -->
                   <el-col :span="8">
                     <el-tag type="success">{{item2.authName}}</el-tag>
                     <i class="el-icon-caret-right"></i>
                   </el-col>
                   <!-- 三级权限 -->
                   <el-col :span="16">
                     <el-tag type="warning" v-for="item3 in item2.children" :key="item3.id"
                     @close="removeTag(item3.id, scope.row)" closable>
                       {{ item3.authName }}
                     </el-tag>
                   </el-col>
                 </el-row>
               </el-col>
             </el-row>
             <pre>
               {{ scope.row }}
             </pre>
           </template>
         </el-table-column>
         <el-table-column type="index" label="#"></el-table-column>
         <el-table-column prop="roleName" label="角色名称"></el-table-column>
         <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
         <el-table-column label="角色操作" width="300">
           <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
              <el-button @click="showSetRolesDialog(scope.row)" type="warning" icon="el-icon-setting" size="mini">分配角色</el-button>
           </template>
         </el-table-column>
        </el-table>
    </el-card>
    <!-- 分配角色对话框 -->
    <el-dialog
      title="分配角色"
      :visible.sync="setRolesDialogVisible"
      @close="closeSetRolesDialogVisible"
      width="50%">
      <el-tree
      ref="tree"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="defaultKeys"
      :data="rights" :props="defaultProps"></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRolesDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="setRolesRights">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      roles: [],
      setRolesDialogVisible: false,
      rights: [],
      defaultProps: {
        // 告诉组件内部我们是通过children 进行数据嵌套的
        children: 'children',
        // 告诉组件我们希望将anthName显示出来
        label: 'authName'
      },
      defaultKeys: [],
      roleId: ''
    }
  },

  created () {
    this.getRolesList()
  },

  methods: {
    async getRolesList () {
      const { data: res } = await this.$axios.get('roles')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取错误')
      this.roles = res.data
      // console.log(res)
    },
    // 点击tag 关闭
    removeTag (rid, row) {
      // console.log(rid, row)
      this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 点击确定
        const { data: res } = await this.$axios.delete(`roles/${row.id}/rights/${rid}`)
        if (res.meta.status !== 200) return this.$message.error('删除数据失败!')
        row.children = res.data
        this.$message.success('删除成功')
      }).catch(() => {
        // 点击取消
        this.$message.error('已取消删除')
      })
    },
    showSetRolesDialog (row) {
      this.setRolesDialogVisible = true
      this.roleId = row.id
      this.getAllKeys(row)
      this.getRightsList()
    },
    async getRightsList () {
      const { data: res } = await this.$axios.get('rights/tree')
      // console.log(res)
      // 判断请求成功或失败
      if (res.meta.status !== 200) return this.$message.error('获取权限列表失败')
      this.rights = res.data
      // console.log(res)
    },
    // 递归函数获取所有的三级分类id
    getAllKeys (row) {
      // 递归必须有结束条件
      if (!row.children) {
        return this.defaultKeys.push(row.id)
      }
      row.children.forEach(item => {
        this.getAllKeys(item)
      })
    },
    closeSetRolesDialogVisible () {
      this.defaultKeys = []
    },
    async setRolesRights () {
      // console.log(this.roleId)
      // 返回选中的全选节点
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      // 返回选中的半选节点
      const HalfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      const allKeys = [...checkedKeys, ...HalfCheckedKeys]
      console.log(allKeys)
      const { data: res } = await this.$axios.post(`roles/${this.roleId}/rights`, {
        rids: allKeys.join(',')
      })
      if (res.meta.status !== 200) return this.$message.error('更新失败')
      this.$message.success('更新成功!')
      this.setRolesDialogVisible = false
      this.getRolesList()
    }
  }
}
</script>

<style scoped lang='less'>
.el-tag {
  margin: 7px;
}
.border_top {
  border-top: 1px solid #eee;
}
.border_buttom {
  border-buttom: 1px solid #eee;
}
.el-row {
  display: flex;
  align-items: center;
}
</style>
